<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地理编码(地址->经纬度)</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,body,#container{
            height:100%;
            width:100%;
        }
        .btn{
            width:10rem;
            margin-left:6.8rem;
        }
    </style>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}" >
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<body>
<div id="container"></div>

<form th:action="@{/tea/map/setting/submit}" method="post">

    <div class="input-card" style='width:28rem;'>
        <label style='color:grey'>设置签到信息</label>

        <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text" >地址</span></div>
            <input id='address' type="text" name="location" placeholder="尽量详细些哦" required>
        </div>
        <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">签到班级</span></div>
            <select name="class_id">
                <option th:each="class:${classes}" th:value="${class.getId()}" th:text="${class.getClass_name()}"></option>
            </select>
        </div>
        <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">截至时间</span></div>
            <input   type="text" name="deadline" id="test1" placeholder="yyyy-MM-dd HH:mm:ss" required>
        </div>
        <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div>
            <input id='lnglat'  type="text" name="location_all" readonly required>
        </div>
        <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">签到范围</span></div>
            <input   type="text" name="distance" placeholder="例如:500 " required>米
        </div>
        <input id="geo" type="button" class="btn" value="地址 -> 经纬度" />
        <input type="submit" class="btn" value="提交" id="mysubmit"/>
    </div>

</form>

<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=dbb7639fba12116f7835ef8c5dc1ce63&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });

    var geocoder = new AMap.Geocoder({
        // city: "010",
    });

    var marker = new AMap.Marker();

    function geoCode() {
        var address  = document.getElementById('address').value;
        // alert(address)

        geocoder.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat = result.geocodes[0].location;

                document.getElementById('lnglat').value = lnglat;

                marker.setPosition(lnglat);
                map.add(marker);
                map.setFitView(marker);
            }else{
                log.error('根据地址查询位置失败');
            }
        });
    }
    document.getElementById("geo").onclick = geoCode;
    document.getElementById('address').onkeydown = function(e) {
        if (e.keyCode === 13) {
            geoCode();
            return false;
        }
        return true;
    };

    $(document).ready(function () {

        $('#mysubmit').hide();

        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#test1'
                ,type: 'datetime'//指定元素
            });
        });

        $('#geo').click(function () {
            $('#mysubmit').show();
        })
    })
</script>
</body>
</html>